<template>
	<layout>
		<view class="h-fill content">
			<u-navbar title="提现" :background="{'background-color': 'rgba(0,0,0,0)'}" :borderBottom="false" titleColor="#fff"
			 backIconColor="#fff"></u-navbar>
			<image class="page-bg" src="../static/img/img_tixian_beig.png" mode="widthFix"></image>
			<view class="p-content">
				<view class="balance-info uni-flex uni-column pad">
					<view class="uni-flex align-center">
						<image class="text-icon" src="../static/img/ic_tixianmingxi.png"></image>
						<text>余额</text>
						<view class="uni-flex-extend"></view>
						<navigator url="./withdraw-list">
							<view class="uni-flex align-center">
								<image class="text-icon" src="../static/img/ic_tixianmingxi_2.png"></image>
								<text>提现记录</text>
								<uni-icons type="forward" color="#fff"></uni-icons>
							</view>
						</navigator>
					</view>
					<text class="uni-text-big t-mg">￥ {{((userInfo.account.balance / 100) || '0')}}</text>
				</view>
				<view class="center pad t-mg">
					<view class="uni-flex align-center uni-text-big">
						<text class="r-mg uni-text-big">￥</text>
						<view class="uni-flex-extend">
							<!-- <u-input height="160" v-model="amount" type="number" placeholder="输入提现金额"/> -->
							<input class="uni-text-big" v-model="amount" type="number" placeholder="请输入提现金额" />
						</view>
						<text class="center-btn-all uni-text-normal" @click="handleFillAll">全部提现</text>
					</view>
					<u-line></u-line>
					<view class="center-tips simple-card round-corner t-mg-2">
						<view class="uni-flex align-center">
							<image class="text-icon" src="../static/img/ic_shuoming.png"></image>
							<text class="uni-bold">提现说明</text>
						</view>
						<view class="center-tips-content uni-flex uni-column t-mg">
							<text>1、复制下面客服微信号，添加客服进行提现审核</text>
							<text>2、提现不收取任何手续费</text>
							<!-- <text>3、提现的钱将存入微信钱包</text> -->
						</view>
					</view>
					<view class="uni-flex align-center t-pad">
						<view class="r-pad b-pad uni-flex align-center">
							<image class="logo" :src="$getCloudStorageUrl('/ic_disankongjian@2x.png')" mode="aspectFit"></image>
							<view class="uni-flex-extend uni-flex uni-column">
								<text>第三空间客服</text>
								<text class="uni-text-gray">客服在线时间</text>
								<text class="uni-text-gray">10:00-12:00, 14:00-18:00</text>
							</view>
						</view>
						<view class="uni-flex-extend"></view>
						<view class="btn-copy uni-flex align-center" @click="handleAdd">
							<image src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_fuzhi@2x.png" mode="aspectFit"></image>
							<text>复制微信号</text>
						</view>
					</view>
					<view class="uni-flex uni-column align-center" style="margin-top: 120rpx;">
						<nice-red-button @click="submit" text="提现"></nice-red-button>
					</view>
				</view>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		requestSubscribeMsg
	} from "../../common/maUtil.js"
	import {
		applyWithdraw,
		getUserInfo
	} from "../../api/platform/user.js"
	export default {
		data() {
			return {
				amount: "",
				busy: false
			};
		},
		computed: {
			...mapState(["userInfo"])
		},
		onReady() {
			this.loadData();
		},
		async onPullDownRefresh() {
			await this.loadData();
			uni.stopPullDownRefresh();
		},
		methods: {
			...mapMutations(["updateUserInfo"]),
			handleAdd() {
				this.$copy("i3d008", () => {
					uni.showModal({
						title: "提示",
						content: "客服微信已复制，请去微信添加客服快速人工提现",
						confirmText: "知道了",
						showCancel: false
					})
				}, '')
			},
			handleFillAll() {
				this.amount = this.userInfo.account.balance / 100 + "";
			},
			submit() {
				if (!this.amount) {
					uni.showToast({
						title: "请输入金额",
						icon: "none"
					})
					return;
				}
				let amount = parseFloat(this.amount);
				if (amount <= 0.3 || amount > this.userInfo.account.balance) {
					uni.showToast({
						icon: "none",
						title: "提现金额不能大于余额且不能小于0.3元"
					})
					return;
				}
				this.applyWithdraw(amount * 100);
			},
			async applyWithdraw(amount) {
				try {
					await applyWithdraw({
						fee: amount
					});

					this.amount = "";
					await this.loadData();

					// #ifdef MP-WEIXIN
					requestSubscribeMsg(["lDL64stLOBK_ohQ3q5oziq5QuK8VNLFRbA8MNP5ayks"]);
					// #endif
					this.$copy("i3d008", () => {
						uni.showModal({
							title: "提示",
							content: "客服微信已复制，请去微信添加客服快速人工提现",
							confirmText: "知道了",
							showCancel: false,
							success: (res) => {
								this.$toast('客服微信已复制，请去微信添加客服快速人工提现')
							}
						})
					}, '')
				} catch (e) {
					this.busy = false;
					this.$log("提现遇到错误", e);
				}
			},
			navToDetail() {
				uni.navigateTo({
					url: "./wallet-detail"
				})
			},
			async loadData() {
				try{
					let currentRegion = uni.getStorageSync('currentRegion')
					let currentCityCode = currentRegion.city.value
					let userInfo = await getUserInfo({}, currentCityCode)
					this.updateUserInfo(userInfo)
				}catch(e){
					console.error(e)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.page-bg {
		position: fixed;
		top: 0;
		width: 100%;
	}

	.p-content {
		position: relative;
	}

	.balance-info {
		color: #FFFFFF;
	}

	.center {
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		&-btn-all {
			color: #3E62FF;
		}

		&-tips {
			background-color: #F5F5F5;

			&-content {
				color: #B4B4B4;
			}
		}
	}

	.info {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		position: relative;
		box-shadow: 0 0 10upx rgba(0, 0, 0, .3);

		&-label {
			color: #888888;
			font-size: 24rpx;
		}

		&-money {
			font-size: 40rpx;
			font-weight: bold;
		}

		&-btn {
			margin-top: 40rpx;
			width: 90%;
			background-color: #619AFF;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			color: #FFFFFF;
			font-size: 30rpx;
		}

		&-btn::after {
			display: none !important;
		}

		&-detail {
			position: absolute;
			top: 40rpx;
			right: 0rpx;
			background-color: rgba(255, 129, 108, 0.5);
			color: #D61719;
			height: 60rpx;
			line-height: 60rpx;
			border-top-left-radius: 60rpx;
			border-bottom-left-radius: 60rpx;
			padding: 0 20rpx;

			text {
				font-size: 20rpx;
			}

			image {
				width: 20rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}
		}
	}

	.popup {
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.btn-copy {
		background-color: #F4F4F4;
		color: #999999;
		padding: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		align-self: flex-start;
		border-top-left-radius: 60rpx;
		border-bottom-left-radius: 60rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}
</style>
